<template>
  <div>
    <!--标题导航-->
    <h4 class="lighter">
      <i class="ace-icon fa fa-hand-o-right icon-animated-hand-pointer blue"></i>
      <router-link to="/business/course" class="pink">{{course.name}}</router-link>
    </h4>
    <hr>
    <!--保存时间-->
    <div>
      <h4 class="modal-title" id="myCourseContentModalLabel">编辑课程内容</h4>
      <span class="pull-right label label-important info-label">
              {{ saveContentLabel }}
       </span>
    </div>
    <!--上传组件-->
    <div>
      <file v-bind:input-id=" 'content-file-upload' "
            v-bind:text=" '上传资源' "
            v-bind:suffixs="[ 'jpg','jpeg','png','mp4'  ]"
            v-bind:use="FILE_USE.COURSE.key"
            v-bind:after-upload="afterUploadContentFile"></file>
      <br>
      <table id="file-table" class="table  table-bordered table-hover">
        <thead>
        <tr>
          <th>名称</th>
          <th>地址</th>
          <th>大小</th>
          <th>操作</th>

        </tr>
        </thead>

        <tbody>

<!--        <tr v-for="(f,i) in files" v-bind:key="f.id">-->
        <tr v-for="f in files" v-bind:key="f.id">
          <td> {{f.name}} </td>
          <td> {{f.url}} </td>
          <td> {{f.size | formatFileSize}} </td>
          <td>
            <button v-on:click="delFile(f)" class="btn btn-xs btn-danger">
              <i class="ace-icon fa fa-trash-o bigger-120"></i>删除
            </button>
          </td>
        </tr>

        </tbody>
      </table>
      <form class="form-horizontal">
        <!--富文本编辑器-->
        <div class="form-group">
          <div class="col-lg-12">
            <div id="content"></div>
          </div>
        </div>
      </form>
    </div>
    <div>
      <router-link to="/business/course" type="button" class="btn btn-white btn-info btn-round" data-dismiss="modal">
        <i class="ace-icon fa fa-times"></i>
        返回课程
      </router-link>
      <button type="button" class="btn btn-white btn-info btn-round" v-on:click="saveContent()">
        <i class="ace-icon fa fa-plus blue"></i>
        保存文本
      </button>
    </div>
  </div>
</template>
<script>
import File from "../../components/file"

export default {
  name:"business-course-content",
  components:{File},
  data:function (){
    return{
      course:{},
      FILE_USE:FILE_USE,
      saveContentLabel: "",
      files:[],
      saveContentInterval:{},
    }
  },
  mounted:function (){
    let _this = this;

    _this.course = SessionStorage.get(SESSION_KEY_COURSE) || {};
    _this.init();
    if(Tool.isEmpty(course)){
      _this.$router.push("/welcome");
    }


    _this.$parent.activeSidebar("business-course-sidebar");
  },
  destroyed: function(){
    let _this =this;
    console.log("组件销毁!");
    clearInterval( _this.saveContentInterval );
  },

  methods:{
    /**编辑课程类容方法
     * 打开内容编辑框*/
    init() {
      let _this = this;
      let course = _this.course;
      let id = course.id;
      $("#content").summernote({
        focus: true,
        height: 300,
      });
      //清空
      $("#content").summernote('code', '');
      _this.saveContentLabel = "不要忘记保存哦！ ";

      _this.listContentFiles();

      _this.$ajax.get(process.env.VUE_APP_SERVER + '/business/admin/course/find-content/' + id).then((response) => {
        Loading.hide();
        let resp = response.data;

        if (resp.success) {
          if (resp.content) {
            $("#content").summernote('code', resp.content.content);
          }

          //定时自动保存
          _this.saveContentInterval = setInterval(function (){
            _this.saveContent();
          },30000);
        } else {
          toast.warning(resp.message);
        }
      });
    },
    /**保存课程内容*/
    saveContent() {
      let _this = this;
      let content = $("#content").summernote("code");
      Loading.show();
      _this.$ajax.post(process.env.VUE_APP_SERVER + '/business/admin/course/save-content', {
        id: _this.course.id,
        content: content,
      }).then((response) => {
        Loading.hide();
        let resp = response.data;
        if (resp.success) {
          _this.saveContentLabel = "最后保存时间：" + Tool.dateFormat("hh时mm分ss秒");
          // toast.success("内容保存成功！");

        } else {
          toast.warning(resp.message);
        }
      });
    },
    /**上传描述组件回调 保存文件记录*/
    afterUploadContentFile(response) {
      let _this = this;
      console.log("开始保存文件记录");
      let file = response.content;
      file.courseId = _this.course.id;
      file.url = file.path;
      _this.$ajax.post(process.env.VUE_APP_SERVER + '/business/admin/course-content-file/save',file).then((response2)=>{
        let resp = response2.data;
        if(resp.success){
          toast.success("上传文件成功啦！")
          _this.files.push(resp.content);
        }
      })
    },

    /**加载课程描述文件*/
    listContentFiles(){
      let _this = this;
      _this.$ajax.get(process.env.VUE_APP_SERVER + '/business/admin/course-content-file/list/'+ _this.course.id).then((response)=>{
        let resp = response.data;
        if(resp.success){
          _this.files = resp.content;
        }
      });
    },

    /**删除课程描述文件*/
    delFile(f){
      let _this = this;
      Confirm.show("删除课程文件不可恢复，确认删除？",function (){
        _this.$ajax.delete(process.env.VUE_APP_SERVER + '/business/admin/course-content-file/delete/'+f.id).then((response)=>{
          let resp = response.data;
          if(resp.success){
            toast.success("删除文件成功!");
            Tool.removeObj(_this.files,f);
          }
        });
      });
    },
  },
}
</script>